<template>
	<view class="container">
		<image src="/static/login/loginbg.png" mode="" class="bg"></image>
		<view class="title-area">
			<view class="arrow" @click="toBack">
			</view>
			<view class="title-text">
				专业洗车
			</view>
		</view>
		<view class="search-area">
			
			<view >
				<input type="text" placeholder="请输入需要搜索的内容" class="input-area"/>
			</view>
			<view>
				<image src="/static/wash-car/sousuo.png" mode="" class="input-icon"></image>
			</view>
		</view>
		<view class="history-area">
			<view class="history-title">
				历史记录：
			</view>
			<view class="history-content" v-for="num in 6" key="num">
				飞飞汽车美容店
			</view>
		</view>
		<view class="option-area" v-for="num in 3" key="num" @click="toWashCarDetail">
			<view class="option-top" >
				<view class="option-title">
					车百世汽车生活馆
				</view>
				<view class="metre">
					556m
				</view>
			</view>
			<view class="option-middle">
				<view class="star-area" >
					<view  v-for="num in 4" key="num" style="padding-right: 5rpx;">
						<image src="/static/wash-car/star.png" mode="" class="star"></image>
					</view>
				</view>
				<view class="score" style="margin-right: 20rpx;">
					4分
				</view>
				<view class="sale">
					销量: 556
				</view>
			</view>
			<view class="option-bottom">
				<view>
					<image src="/static/index/indexbg.png" mode="" class="option-image"></image>
				</view>
				<view class="option-detail-area">
					<view class="week">
						营业时间：周一到周五
					</view>
					<view class="time">
						早上8:00-晚上22:00
					</view>
					<view class="address">
						北京市海淀区中关村南大街
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	const toBack = () => {
		uni.navigateBack()
	}
	const toWashCarDetail = ()=>{
		uni.navigateTo({
			url:"/pages/wash-car/wash-car-detail/wash-car-detail"
		})
	}
</script>

<style scoped>
	.container{
		height: 100vh;
		background-color: #eee;
		position: relative;
		z-index: 1;
		padding: 0 20rpx;
	}
	.bg{
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.title-area{
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}
	.arrow{
	  width: 14rpx;
	  height: 14rpx;
	  border-left-style: solid;
	  border-left-width: 2rpx;
	  border-bottom-style: solid;
	  border-bottom-width: 2rpx;
	  transform: rotate(45deg);
	}
	.title-text{
		 flex-grow: 1;
		  display: flex;
		  justify-content: center; 
	}
	.search-area{
		background-color: #FFFFFF;
		padding: 0 30rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 70rpx;
	}
	.input-area{
		font-size: 24rpx;
	}
	.input-icon{
		width: 30rpx;
		height: 30rpx;
	}
	.history-area{
		color: #FFFFFF;
		padding: 20rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}
	.history-title{
		font-size: 30rpx;
	}
	.history-content{
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	.option-area{
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}
	.option-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.option-title{
		font-size: 30rpx;
	}
	.metre{
		font-size: 24rpx;
		color: blue;
	}
	.option-middle{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 20rpx;
	}
	.star-area{
		display: flex;
		margin-right: 5rpx;
	}
	.star{
		width: 20rpx;
		height: 20rpx;
	}
	.option-bottom{
		display: flex;
	}
	.option-image{
		max-width: 220rpx;
		max-height: 150rpx;
		border-radius: 20rpx;
	}
	.option-detail-area{
		font-size: 24rpx;
		padding-left: 30rpx;
	}
	.week{
		padding: 5rpx 0;
	}
	.time{
		padding: 5rpx 0;
	}
	.address{
		padding: 5rpx 0;
	}
</style>
